<template>
    <div class="container bbtable">
        <div id="print-content">
            <div>
                <div style="width: 100%;text-align: center;font-size: 24px;font-weight: 700;">委托运营房产情况报表</div>
                <div style="width: 100%;display: flex;justify-content: space-between;margin: 10px auto;">
                    <div style="font-size: 14px;font-weight: 700;width: auto;display: flex;width: 50%;">
                        <div style="width: 12%;line-height: 32px;">填报单位：</div>
                        <div style="line-height: 32px;">{{ bbform.stdwmc }}</div>
                    </div>
                    <div
                        style="font-size: 14px;font-weight: 700;display: flex;width: 24%;justify-content: space-around">
                        <div style="width: 26%;line-height: 32px;">填报时间：</div>
                        <div style="width: 80px;"><el-input v-model="bbform.year" style="width: 100%;" /></div>
                        <div style="line-height: 32px;">年</div>
                        <div style="width: 80px;"><el-input v-model="bbform.month" style="width: 100%;" /></div>
                        <div style="line-height: 32px;">月</div>
                    </div>
                </div>
            </div>
            <el-table :data="bbList" style="width: 100%" :cell-style="{ borderColor: '#000' }"
                :header-cell-style="{ borderColor: '#000', color: '#000', fontWeight: '700' }" class="exporttable"
                border>
                <el-table-column label="序号" align="center" prop="xh" width="60">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.xh" style="width: 100%;" />
                    </template>
                </el-table-column>
                <el-table-column label="基本情况" align="center">
                    <el-table-column label="房产地址" align="center" prop="fwdz" width="460">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.fwdz" placeholder="请选择房产地址" clearable
                                @change="onSearch(scope.row, scope.$index)" style="width: 100%;" filterable>
                                <el-option v-for="item in wtyytableData" :key="item.value" :label="item.fwdz"
                                    :value="item.fwdz">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="建筑面积（㎡）" align="center" prop="jzmj" width="100">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.jzmj" style="width: 100%;" />
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="经营情况" align="center">
                    <el-table-column label="出租/招租中" align="center" prop="jyzt" width="80">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.jyzt" style="width: 100%;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="租赁方" align="center" prop="zlf" width="160">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.zlf" style="width: 100%;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="租期" align="center" prop="zq" width="80">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.zq" style="width: 100%;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column :label="bbform.year + '年 合同租金（元）'" align="center" prop="htje" width="120">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.htje" style="width: 100%;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="收缴租金（元）" align="center">
                        <el-table-column label="本月应收" align="center" prop="byys" width="100">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.byys" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="截至本月实收租金" align="center" prop="ssje" width="100">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.ssje" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="欠租时间、金额" align="center" prop="qz" width="120">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.qz" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="纠纷/诉讼" align="center" prop="jfss" width="120">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.jfss" style="width: 100%;"></el-input>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="安全使用及巡查情况" align="center">
                    <el-table-column label="房屋拆改" align="center" prop="fwcg" width="220">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.fwcg" style="width: 100%;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="房屋附属设施设备" align="center" prop="fwfssb" width="220">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.fwfssb" style="width: 100%;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="消防设施设备是否满足防火要求" align="center" prop="xfsb" width="80">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.xfsb" style="width: 100%;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="本月安全巡查次数" align="center" prop="xccs">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.xccs" style="width: 100%;"></el-input>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="修缮情况" align="center">
                    <el-table-column label="是否修缮" align="center" prop="sfxs" width="70">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.sfxs" style="width: 100%;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="修缮费支出（元）" align="center" prop="xsf" width="120">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.xsf" style="width: 100%;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="工程是否完工" align="center" prop="gczt" width="70">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.gczt" style="width: 100%;"></el-input>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="备注" prop="bz" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.bz" style="width: 100%;"></el-input>
                    </template>
                </el-table-column>
            </el-table>
            <div style="width: 10%;margin: auto;">
                <el-button size="mini" type="primary" @click="addlist">新增一行</el-button>
            </div>
            <div style="margin-top: 10px;font-size: 12px;">
                <div>填表说明：</div>
                <div>
                    1.“收缴租金”是指截至本月底欠租情况和月租金的收缴情况，如收缴本月租金，在“收缴租金”—“截至本月实收租金”项下填{{ bbform.year }}年截至本月底累计实收租金；如有欠租，在“收缴租金”—“欠租时间、金额”项下填写所欠租金的租期和所租金数额。
                </div>
                <div>2.“是否涉诉”是指房屋是否存在诉讼情况，如有诉讼，需再在“是否涉诉”项下，填“有”，且需另附情况说明；</div>
                <div>3.“房屋拆改”是指房产是否存在拆除、改建、扩建和装修改造等情况；“房屋附属设施设备”是指房屋附属设施设备是否存在添加和改造的情况，如选“无”以外选项，需另附情况说明；</div>
                <div>4.“消防设施设备是否满足防火要求”是指该房屋消防设施设备，在数量、种类、有效性等方面满足防火要求及规范。</div>
                <div>5.“是否修缮”是指本月是否有房产修缮工程开工；“修缮费支出” 是指本月修缮费用实际支出金额；“工程是否完工”是指本月是否有修缮工程完工的情况。</div>
                <div>6. 本报表每月30日之间前报送，须加盖填报单位公章。</div>
            </div>
            <div style="margin-top: 10px;">
                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'" :on-remove="handleRemoves"
                    :before-remove="beforeRemoves" multiple :on-success="handelfilesuccess" :headers="myHeaders"
                    :file-list="filefileList">
                    <div class="unloadTitle">附件</div>
                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                </el-upload>
            </div>
            <div style="width: 20%;margin: auto;">
                <el-button size="mini" type="primary" @click="addclick" :disabled="isSubmit">保存</el-button>
                <el-button size="mini" @click="cacelsubmitForm('ruleForm')">返回</el-button>
            </div>

        </div>

    </div>
</template>
<script>
import { wtbblistadd, wtyylist, wtdwlistdetails, getbbdetails } from '@/api/index';
import global from '@/components/common/httpurl.vue'
export default {
    name: 'addbaobiaolist',
    data() {
        return {
            httpUrl: global.httpUrl,//公共地址
            myHeaders: {
                'token': localStorage.getItem('token')
            },
            filefileList: [],
            isSubmit: false,
            bbform: {
                month: '',
                fj: '',
                nrlist: [],
                stdwid: this.$store.getters.company,
                stdwmc: '',
                year: ''
            },
            bbList: [{ xh: '1', fwdz: '', jzmj: '', jyzt: '', zlf: '', zq: '', htje: '', byys: '', ssje: '', qz: '', jfss: '', fwcg: '', fwfssb: '', xfsb: '', xccs: '', sfxs: '', xsf: '', gczt: '', bz: "" }],
            wtyytableData: [],
            wtyyform: {
                cb: '',//产别 ,
                cqdw: '',//产权单位 ,
                create_time: '',//创建时间 ,
                current: 1,//第几页 ,
                dabh: '',//档案编号 ,
                fwdz: '',//地址 ,
                id: '',//id ,
                jyzt: '',//经营状态 0：招租中 1：出租 ,
                jzmj: '',//建筑面积 ,
                pageSize: 999,//每页数量 ,
                qs: '',//区属 ,
                stdwid: this.$store.getters.company ? (this.$store.getters.company != 'null' ? this.$store.getters.company : '') : '',//受托单位ID
            },
        }
    },
    methods: {
        // 取消
        cacelsubmitForm() {
            this.$router.go(-1);
        },
        // 保存
        addclick() {
            this.bbform.nrlist = this.bbList
            wtbblistadd(this.bbform).then(res => {
                if (res.code == 200) {
                    this.$message.success('保存成功')
                    this.isSubmit = true
                    this.$router.go(-1);
                }
            })
        },
        // 新增一行
        addlist() {
            this.bbList.push({
                xh: this.bbList.length + 1,
                fwdz: '',
                jzmj: '',
                jyzt: '',
                zlf: '',
                zq: '',
                htje: '',
                byys: '',
                ssje: '',
                qz: '',
                jfss: '',
                fwcg: '',
                fwfssb: '',
                xfsb: '',
                xccs: '',
                sfxs: '',
                xsf: '',
                gczt: '',
                bz: ""
            })
        },
        // 委托运营列表
        wtyylist(data) {
            wtyylist(data).then((res) => {
                if (res.code == 200) {
                    this.wtyytableData = res.data.records;
                } else {
                    this.wtyytableData = [];
                }
            });
        },
        // 获取新增报表详情
        getbbdetails(data) {
            getbbdetails(data).then(res => {
                if (res.code == 200) {
                    console.log('新增详情',res.data.wtbbnr)
                    this.bbList=res.data.wtbbnr?res.data.wtbbnr:[{ xh: '1', fwdz: '', jzmj: '', jyzt: '', zlf: '', zq: '', htje: '', byys: '', ssje: '', qz: '', jfss: '', fwcg: '', fwfssb: '', xfsb: '', xccs: '', sfxs: '', xsf: '', gczt: '', bz: "" }]
                }else{
                    this.bbList=[{ xh: '1', fwdz: '', jzmj: '', jyzt: '', zlf: '', zq: '', htje: '', byys: '', ssje: '', qz: '', jfss: '', fwcg: '', fwfssb: '', xfsb: '', xccs: '', sfxs: '', xsf: '', gczt: '', bz: "" }]
                }
            })
        },
        // 房屋地址搜索
        onSearch(val, index) {
            let wtyyval = this.wtyytableData.find(res => {
                return res.fwdz == val.fwdz
            })
            this.bbList[index].fwdz = wtyyval.fwdz
            this.bbList[index].jzmj = wtyyval.jzmj
            console.log('jyzt', wtyyval.jyzt)
            this.bbList[index].jyzt = wtyyval.jyzt == '1' ? '出租' : '招租中'
            console.log('bbList', this.bbList[index].jyzt)
        },
        // 文件
        handleRemoves(file, fileList) {
            console.log(fileList)
            this.fileListshandle = fileList.map((res) => {
                return res.response.data.id;
            });
            this.bbform.fj = this.fileListshandle.toString()
        },
        // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file)
            console.log(fileList)
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功
        handelfilesuccess(response, file, fileLists) {
            console.log(fileLists)
            this.$message.success('导入成功');
            this.fileListshandle = fileLists.map((res) => {
                console.log(res.response.data)
                return res.response.data.id;
            });
            this.bbform.fj = this.fileListshandle.toString()
        },
        // 获取当前年
        getyear() {
            let currentDate = new Date();
            this.bbform.year = currentDate.getFullYear();
            this.bbform.month = currentDate.getMonth() + 1;
        },
        // 委托单位详情
        wtdwlistdetails(data) {
            wtdwlistdetails(data).then((res) => {
                this.bbform.stdwmc = res.data.dwmc;
            });
        },
    },
    mounted() {
        // 委托运营列表
        this.wtyylist(this.wtyyform)
    },
    created() {
        this.getyear()
        let data = {
            id: this.$store.getters.company
        };
        this.wtdwlistdetails(data)
        let bbdata = {
            stdwid: this.$store.getters.company
        }
        this.getbbdetails(bbdata)
    }
}
</script>
<style scoped>
.container {
    /* height: calc(100vh - 260px); */
    overflow: hidden;
}

.exporttable {
    border: solid 1px #000;
}
</style>
<style>
.el-upload-list {
    width: 60%;
}

.el-upload--text {
    width: auto;
    height: 80px;
    overflow: hidden;
    border: none;
}
</style>